import React,{ Component } from 'react';
import '../../../index/index.scss';
import { signGroupList, editOrAddSign, addAccountSign, delAccountSign, delSignUser } from 'api/client.js';
import './clientLabel.scss';
import { message } from 'antd';
let timeOutEvent;
let longClick = 0;
export default class ClientLabel extends Component{
	constructor (props) {
		super(props)
		this.state={
			clientLabelList: [],
			hiden: 'hiden',
			hide: 'hiden',
			classInfo: '',
			groupList: [],
			labelCss: 'labelCss',
			sign_id: '',
			index: ''
		}
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	addlabel () { //添加标签
		this.setState({
			hide: ''
		})
	}
	closeLabel () { // 关闭add标签
		this.setState({
			hide: 'hiden'
		})
	}
	_editOrAddSign () { //编辑添加标签
		editOrAddSign({
			employee_id:10000,
			group_id: this.state.group_id,
			sign_name: this.state.sign_name
		}).then(res => {
			if(res.code === 1){
				let newList ;
				this.state.clientLabelList.forEach((value,index) => {
					if( value.group_id === this.state.group_id ){
						newList = {sign_id: res.data.id, sign_name: this.state.sign_name, is_select: 0}
						value.sign_list.push(newList)
					}
				})
				this.setState({
					hide: 'hiden',
					clientLabelList: this.state.clientLabelList
				})
			} else {
				message.error(res.message,3)
			}
		})
	}
	_signGroupList () { //标签分组
		signGroupList({
			need_sign: 0
		}).then(res => {
			if(res.code === 1){
				this.setState({
					groupList: res.data
				})
			}
		})
	}
	selectChange (name,id) { //模拟select
		this.setState({
			classInfo:name,
			hiden: 'hiden',
			group_id: id
		})
	}
	selectLabel () { //出现下拉框
		this.setState({
			hiden: this.state.hiden === '' ? 'hiden' : ''
		})
	}
	handChange (e) {
		this.setState({
			sign_name: e.target.value
		})
	}
	_addAccountSign (sign_id) { //给客户add标签
		let arr2=[this.props.location.state.user_id]
		addAccountSign({
			user_ids: arr2,
			employee_id: 1,
			sign_id: sign_id
		}).then(res => {
			if(res.code === 1){
				this.state.clientLabelList.forEach((value,index) => {
					value.sign_list.forEach((v,i) => {
						if( v.sign_id === sign_id ){
							v.is_select = 1
						}
					})
				})
				this.setState({
					sign_id: sign_id,
					clientLabelList: this.state.clientLabelList
				})
				
			} else {
				message.error(res.message,3)
			}
		})
	}
	_delAccountSign (sign_id) {//删除客户标签
		delAccountSign({
			sign_id: sign_id,
			user_id: this.props.location.state.user_id
		}).then(res => {
			if(res.code ===1){
				this.state.clientLabelList.forEach((value,index) => {
					value.sign_list.forEach((v,i) => {
						if( v.sign_id === sign_id ){
							v.is_select = 0
						}
					})
				})
				this.setState({
					clientLabelList: this.state.clientLabelList
				})
			}
		})
	}
	_delSignUser (sign_id) {//删除标签
		delSignUser({
			sign_id: sign_id
		}).then(res => {
			if(res.code ===1){
				this.state.clientLabelList.forEach((value,index) => {
					value.sign_list.forEach((v,i) => {
						if( v.sign_id === sign_id ){
							value.sign_list.splice(i, 1)
						}
					})
				})
				this.setState({
					clientLabelList: this.state.clientLabelList
				})
			}
		})
	}
	start (index) {
		let that = this;
		timeOutEvent = setTimeout(() => { //长按事件
			that.setState({ 
				index: index
			})
			longClick = 1;
		},500);
	}
	move (e) {
		clearTimeout(timeOutEvent); 
		timeOutEvent = 0;
		e.preventDefault();
	}
	end (sign_id,is_select) {
		clearTimeout(timeOutEvent);
		if(timeOutEvent!== 0 && longClick === 0){ //点击事件
			if(is_select === 1){//给客户删除标签
				this._delAccountSign(sign_id)
			} else if(is_select === 0){//给客户添加标签
				this._addAccountSign(sign_id)
			}
		}
		return false;
	}
	componentDidMount(){
		document.title = '个性标签'
		signGroupList({
			need_sign: 1,
			user_id: this.props.location.state.user_id
		}).then(res => {
			if(res.code === 1){
				this.setState({
					clientLabelList: res.data
				})
			}
		})
		this._signGroupList()
	}
	render(){
		return(
			<div className="clientLabel">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>个性标签</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="clientLabel_content">
				{
					this.state.clientLabelList.map((item,index) => {
						return(
							<div key={index} className="clientLabel_class">
						 		<p className="clientLabel_class_title">{item.group_name}</p>
						 		<ul className="clientLabel_class_signName">
						 		{
						 			item.sign_list.map((v,i) => {
						 				return(
						 					<li key={i} className={v.is_select === 1 ? this.state.labelCss : undefined} onTouchStart={this.start.bind(this,v.sign_id)} onTouchMove={this.move} onTouchEnd={this.end.bind(this,v.sign_id,v.is_select)}>
						 						{v.sign_name}
						 						{
						 							this.state.index === v.sign_id ? <i className="glyphicon glyphicon-del clientLabel_del" onClick={this._delSignUser.bind(this,v.sign_id)}></i> : undefined
						 						}
						 					</li>
						 				)
						 			}) 
						 		}
						 		</ul>
						 </div>
						)
					})
				} 
				</div>
				<div className="clientLabel_button" onClick={this.addlabel.bind(this)}>
					<i className="glyphicon glyphicon-add"></i>新增标签
				</div>
				<div className={`label_add ${this.state.hide}`}>
					<div className="label_add_info">
						<p className="label_add_title">添加自定义标签</p>
						<input type="text" onChange={this.handChange.bind(this)} vlaue={this.state.sign_name}/>
						<div className="label_add_class">
							<p>选择分类</p>
							<p className="label_add_select" onClick={this.selectLabel.bind(this)}>{this.state.classInfo}<i className="glyphicon glyphicon-down1"></i></p>
							<ul className={`label_add_option ${this.state.hiden}`}>
							{
								this.state.groupList.map((item,index) => {
									return(
										<li key={index} onClick={this.selectChange.bind(this,item.group_name,item.group_id)}>{item.group_name}</li>
									)
								})
							}
							</ul>
						</div>
						<div className="label_add_button">
							<p onClick={this.closeLabel.bind(this)}>取消</p>
							<p onClick={this._editOrAddSign.bind(this)}>确定</p>
						</div>
					</div>
				</div>
			</div>
		)
	}
}